<template>
  <div class="register">
    <transition appear
      appear-class="form-appear"
      appear-to-class="form-to-appear"
      appear-active-class="form-active"
    >
      <div class="left-register">
        <div class="content">
          <div class="title">
            <h1>创建账户</h1>
            <p>用邮箱快速创建！</p>
          </div>
          <div class="form">
            <div class="row">
              <label>邮箱:</label>
              <div class="input-box" :class="{onfocus: e_focused}">
                <input type="text" placeholder="请输入邮箱" 
                  v-model="form.email" @focus="onFocus('email')" @blur="onBlur('email')">
              </div>
            </div>
            <div class="row">
              <label>密码:</label>
              <div class="input-box" :class="{onfocus: p_focused}">
                <input type="password" placeholder="请输入密码" 
                  v-model="form.password" @focus="onFocus('pwd')" @blur="onBlur('pwd')">
              </div>
            </div>
            <div class="row">
              <label>确认密码:</label>
              <div class="input-box" :class="{onfocus: rp_focused}">
                <input type="password" placeholder="请再输入密码" 
                  v-model="rpassword" @focus="onFocus('rpwd')" @blur="onBlur('rpwd')">
              </div>
            </div>
            <div class="btn-group">
              <div class="login-btn">
                <button @click="goLogin()">注册</button>
              </div>
              <div class="create-btn">
                <button @click="goCreate()">登录</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <transition appear
      appear-class="bg-appear"
      appear-to-class="bg-to-appear"
      appear-active-class="bg-active"
    >
      <div class="right-bg"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    return {
      form: {
        uid: '',
        email: '',
        password: '',
      },
      rpassword: '',
      checked: false,
      e_focused: false,
      p_focused: false,
      rp_focused: false,
      isShow: true,
    }
  },
  methods: {
    goLogin() {
      const state = this.form.email && this.form.password && this.rpassword;
      if (state) {
        if (this.form.password === this.rpassword) {
          // 生成 uuid
          this.form.uid = this.$getUid;
          this.$http
              .post('/api/register', this.form)
              .then(({data, config}) => {
                if (data.code === 200) {
                  this.$message({
                    message: '注册成功！',
                    type: 'success',
                  });
                  this.$router.push('/');
                } else {
                  this.$message({
                    message: '注册失败！',
                    type: 'error',
                  })
                }
              })
        } else {
          this.$message({
            message: '两次输入密码不一致！',
            type: 'warning',
          })
        }
      } else {
        this.$message({
          message: '请输入邮箱和密码！',
          type: 'warning',
        })
      }
    },
    goCreate() {
      this.$router.push('/');
    },
    onFocus(type) {
      if (type === 'email') {
        this.e_focused = true;
      } else if (type === 'pwd') {
        this.p_focused = true;
      } else if (type === 'rpwd') {
        this.rp_focused = true;
      }
    },
    onBlur(type) {
      if (type === 'email') {
        this.e_focused = false;
      } else if (type === 'pwd') {
        this.p_focused = false;
      } else if (type === 'rpwd') {
        this.rp_focused = false;
      }
    }
  }
}
</script>

<style scoped>
.register {
  width: 100%;
  height: 100vh;
  display: flex;
}
.right-bg {
  width: 33%;
  height: 100%;
  background-image: url('../../assets/bg1.jpg');
  background-position: right;
}
.left-register {
  background: #ffffff;
  flex: 1 1;
  display: flex;
}
.content {
  width: 500px;
  height: 500px;
  margin: auto;
  margin-right: 20%;
}
.title > h1 {
  margin-top: 10px;
}

.input-box {
  width: 315px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #D4D4D4;
  border-radius: 4px;
  margin: 12px 0;
  transition: all .3s;
}
.input-box.onfocus {
  border-color: #04C35C;
}
.row {
  margin: 20px 0;
}
.remem {
  margin-top: -12px;
}
.form {
  margin-top: 40px;
}
.btn-group {
  margin-top: 20px;
}
button {
  width: 315px;
  margin: 8px 0;
  border-radius: 4px;
  color: #fff;
  transition: all .3s;
}
.login-btn > button {
  background: #04C35C;
}
.login-btn > button:hover {
  background: #0aa151;
}
.create-btn > button {
  background: #49554E;
}
.create-btn > button:hover {
  background: #748079;
}

/* 深度修改 element ui 样式 */
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #04C35C;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #04C35C;
  border-color: #04C35C;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #04C35C;
}

/* 过渡动画 */
.bg-active, .form-active {
  transition: all .5s ;
}
.bg-appear, .bg-to-leave {
  transform: translateX(200px);
  opacity: 0;
}
.bg-to-appear, .bg-leave, .form-appear, .form-leave {
  transform: translateX(0);
  opacity: 1;
}
.form-appear, .form-to-leave {
  transform: translateX(300px);
  opacity: 0;
}
</style>